<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./lib/echarts.min.js"></script>
		<script src="./lib/jquery.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>

		<script type="text/javascript">
			let mCharts = echarts.init(document.querySelector('div'));
			mCharts.showLoading(); //在获取数据之前，显示加载动画
			$.get('./data/test.data.json', function (ret) {
				mCharts.hideLoading(); //当服务器响应数据后，隐藏加载动画
				let axisData = [];
				for (let i = 0; i < ret.length; i++) {
					let height = ret[i].height;
					let weight = ret[i].weight;
					let newArray = [height, weight];
					axisData.push(newArray);
				}
				let option = {
					title: {
						text: '身高与体重的关系',
						textStyle: {
							color: 'red',
						},
					},
					//x 轴和 y 轴类型都是 value
					xAxis: {
						type: 'value',
						scale: true,
					},
					yAxis: {
						type: 'value',
						scale: true,
					},
					series: [
						{
							// type: 'scatter', //散点
							type: 'effectScatter',
							showEffectOn: 'emphasis', // render都有涟漪  emphasis鼠标移动才有
							rippleEffect: {
								scale: 5,
							},
							data: axisData, //x轴和y轴数据：二维数组
							//气泡效果
							symbolSize: function (arg) {
								// console.log(arg);
								let height = arg[0] / 100;
								let weight = arg[1];
								// bmi = 体重kg / （身高m * 身高m）  大于 28 表示肥胖
								let bmi = weight / (height * height);
								if (bmi > 28) {
									return 20;
								}
								return 5;
							},
							//气泡颜色
							itemStyle: {
								color: function (arg) {
									// console.log(arg);
									let height = arg.data[0] / 100;
									let weight = arg.data[1];
									// bmi = 体重kg / （身高m * 身高m）  大于 28 表示肥胖
									let bmi = weight / (height * height);
									if (bmi > 28) {
										return 'red';
									}
									return 'green';
								},
							},
						},
					],
				};
				mCharts.setOption(option);
			});
		</script>
	</body>
</html>
